<template>
  <div class="myComment">
    <template v-for="(item,index) in listData">
      <!--        回复论坛-->
      <div class="itemBox" :key="index">
        <div>时间：{{ item.createTime }}</div>
        <div>我的评论：<span v-html="setArr(item.textComment)"></span></div>
        <div class="itemYuan">
          <div>原帖：<span v-html="setArr(item.father.textDocument)"></span>
            <div class="cententImg">
              <el-image
                v-for="innerItem in item.father.fileList"
                :key="innerItem"
                :src="innerItem"
                fit="cover"
                :preview-src-list="item.father.fileList"
              >
              </el-image>
            </div>

          </div>
          <div v-if="item.replyComment">被我回复过的评论：<span v-html="setArr(item.replyComment)"></span></div>
        </div>
      </div>
      <!--        回复论坛-->
    </template>
  </div>
</template>
<script>
import {getHomePageMyComment} from "@/api/homePgae";

export default {
  data() {
    return {
      listData: []
    }
  },
  mounted() {
    this.getListData()
  },
  methods: {
    getListData() {
      getHomePageMyComment({userId: this.$route.query.userId}).then(res => {
        let arr = []
        res.rows.forEach(ele => {
          let arrImage = [];
          if (ele.fileAddress1) {
            arrImage.push(ele.fileAddress1);
          }
          if (ele.fileAddress2) {
            arrImage.push(ele.fileAddress2);
          }
          if (ele.fileAddress3) {
            arrImage.push(ele.fileAddress3);
          }
          if (ele.fileAddress4) {
            arrImage.push(ele.fileAddress4);
          }
          if (ele.fileAddress5) {
            arrImage.push(ele.fileAddress5);
          }
          if (ele.fileAddress6) {
            arrImage.push(ele.fileAddress6);
          }
          if (ele.fileAddress7) {
            arrImage.push(ele.fileAddress7);
          }
          if (ele.fileAddress8) {
            arrImage.push(ele.fileAddress8);
          }
          if (ele.fileAddress9) {
            arrImage.push(ele.fileAddress9);
          }
          ele["fileList"] = arrImage;
          ele.commentList.map(item => {

            item['father'] = ele
            arr.push(item)
          })
        })
        console.log(arr, 'arr')
        this.listData = arr
      })
    },
    setArr(item) {
      if (item) {

        return item.replace(/\[|\]/g, '');
      }
    }
  }
}

</script>
<style lang="scss" scoped>
.myComment {
  height: 100%;
  overflow: auto;
  font-size: 12px;
}

.itemBox {
  //padding: 10px 20px;
  padding: 10px 0;
  margin: 0 20px;
  border-bottom: 1px solid #ccc;

  > div:nth-of-type(1) {
    margin-top: 0;
  }

  > div {
    margin-top: 10px;
  }
}

.itemYuan {
  padding: 5px 15px;
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid #ccc;
  max-width: fit-content;
}


.cententImg {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 10px;

  > .el-image {
    margin-bottom: 10px;
    width: 133px;
    height: 133px;
    margin-left: 8px;
  }
}
</style>
